<template>
  <div class="-mt-46 h-[calc(100vh-15px)]">
    <div
      ref="scrollContainer"
      class="scroll-view scroll-view--vertical hide-scrollbar flex-1 page-wrapper"
      :style="`background-image: url(${IMG_CDN_39}/noTrainVideoIntro/background_main.jpg),url(${IMG_CDN_39}/noTrainVideoIntro/background_second.jpeg),url(${IMG_CDN_39}/noTrainVideoIntro/background_third.jpg)`"
    >
      <div ref="scrollContent" class="scroll-view__content pt-15">
        <div
          class="c-bg-white-70 pb-20 pt-15 px-15 rounded-20 relative border border-solid border-white"
        >
          <img
            :src="`${IMG_CDN_39}/noTrainVideoIntro/num_tag1.png`"
            class="h-35 w-44 absolute -left-1 -top-4"
            alt="tips"
          />
          <div class="pl-29 font-bold text-16">什么是极速数字人</div>
          <div class="mt-12 leading-20 text-14">
            创客匠人AI极速数字人是一款高效训练的数字人产品，仅需对着镜头说123123进行视频拍摄，系统训练后输入文案即可高效产出短视频。
          </div>
        </div>
        <div
          class="c-bg-white-70 pb-20 pt-15 px-15 rounded-20 relative border border-solid border-white mt-18"
        >
          <img
            :src="`${IMG_CDN_39}/noTrainVideoIntro/num_tag2.png`"
            class="h-35 w-44 absolute -left-1 -top-4"
            alt="tips"
          />
          <div class="pl-29 font-bold text-16">极速数字人案例</div>
          <div
            class="example-video-box mt-12 w-full rounded-20 overflow-hidden"
          >
            <video
              class="example-video size-full"
              :src="`${VIDEO_CDN_39}/createNoTrainVideo/difference_video.mp4`"
              :autoplay="true"
              :controls="false"
              :muted="true"
              :loop="true"
            />
          </div>
          <div
            class="flex items-center justify-around mt-10 text-16 c-fa-dingding"
          >
            <div>原视频</div>
            <div>AI合成视频</div>
          </div>
        </div>
        <div
          v-if="adRechargeProdList.length > 0"
          class="mt-18 pb-20 relative rounded-20 package-box"
          :style="`background-image: url(${IMG_CDN_39}/noTrainVideoIntro/package_tab_${adRechargeProdNum == 0 ? 'left' : 'right'}.jpeg?t=1), url(${IMG_CDN_39}/noTrainVideoIntro/package_bg.jpg?t=1);`"
        >
          <img
            :src="`${IMG_CDN_39}/noTrainVideoIntro/num_tag3.png`"
            class="h-35 w-44 absolute -left-1 -top-4"
            alt="tips"
          />
          <div class="flex">
            <div
              v-for="(item, index) in adRechargeProdList"
              :key="item.id"
              class="flex-1 h-50 leading-50 font-bold text-16 text-center"
              @click="adRechargeProdNum = index"
            >
              {{ item.rechargeProdName }}
            </div>
          </div>
          <div
            class="flex flex-col p-10 min-h-170 mt-15 mx-15 rounded-10 border-2 border-dashed border-E2E0FF bg-F5F5F5"
          >
            <div
              v-for="item in adRechargeProdList[adRechargeProdNum]
                .rechargeAssetInfoVoList"
              :key="item.assetType"
              class="mb-4 leading-20 text-14"
            >
              <span>{{ ASSET_TYPE_MAP[item.assetType] }}</span>
              <span class="ml-10 text-20 text-2614FF leading-28 font-bold">{{
                item.assetAmount
              }}</span>
              <span>个</span>
            </div>
            <div class="mt-auto text-FF4A35 font-bold text-16 text-right">
              <span
                >{{
                  adRechargeProdList[adRechargeProdNum].rechargeProdName
                }}
                ¥</span
              >
              <span class="text-36 leading-50">{{
                payMoneySplit(adRechargeProdList[adRechargeProdNum].priceMoney)
                  .integerPart
              }}</span>
              <span
                v-if="
                  payMoneySplit(
                    adRechargeProdList[adRechargeProdNum].priceMoney
                  ).decimalPart
                "
                >.{{
                  payMoneySplit(
                    adRechargeProdList[adRechargeProdNum].priceMoney
                  ).decimalPart
                }}</span
              >
            </div>
          </div>
          <div>
            <ButtonFooter
              buttonText="立即购买"
              class="mt-20 px-15"
              @confirm="confirmBuy"
            />
          </div>
        </div>
        <div
          class="c-bg-white-70 pb-20 pt-15 px-15 rounded-20 relative border border-solid border-white mt-18"
        >
          <img
            :src="`${IMG_CDN_39}/noTrainVideoIntro/num_tag4.png`"
            class="h-35 w-44 absolute -left-1 -top-4"
            alt="tips"
          />
          <div class="pl-29 font-bold text-16">权益说明</div>
          <div class="mt-10 leading-20 text-14">
            1、2D数字人（极速版）卡位：可训练极速数字人的卡位次数
          </div>
          <div class="mt-10 leading-20 text-14">
            2、极速音色卡位：可训练极速音色卡位
          </div>
          <div class="mt-10 leading-20 text-14">
            3、AI币：生成视频所需消耗算力，1AI币可生成1秒视频
          </div>
        </div>
        <div
          class="c-bg-white-70 pb-20 pt-15 px-15 rounded-20 relative border border-solid border-white mt-18"
        >
          <img
            :src="`${IMG_CDN_39}/noTrainVideoIntro/num_tag5.png`"
            class="h-35 w-44 absolute -left-1 -top-4"
            alt="tips"
          />
          <div class="pl-29 font-bold text-16">极速数字人案例</div>
          <div class="guide-video-box mt-12 w-full rounded-20 overflow-hidden">
            <video
              class="guide-video size-full"
              :src="`${VIDEO_CDN_39}/noTrainVideoIntro/no_train_video_guide.mp4`"
              :autoplay="false"
              :controls="true"
              :loop="true"
            />
          </div>
        </div>
        <div
          class="c-bg-white-70 pb-20 pt-15 px-15 rounded-20 relative border border-solid border-white mt-18"
        >
          <img
            :src="`${IMG_CDN_39}/noTrainVideoIntro/num_tag6.png`"
            class="h-35 w-44 absolute -left-1 -top-4"
            alt="tips"
          />
          <div class="pl-29 font-bold text-16">产品补充说明</div>
          <div class="mt-10 leading-20 text-14">
            1、训练视频采取mp4/mov格式，时长不超过两分钟，大小在400M以内
          </div>
          <div class="mt-10 leading-20 text-14">
            2、训练音色时可根据系统提示词录音，也可自行录制后将录音上传到微信后进行训练
          </div>
          <div class="mt-10 leading-20 text-14">
            3、AI币消耗完后，可自行充值购买，生成视频前会提示本次所消耗AI币
          </div>
          <div class="mt-10 leading-20 text-14">
            4、套餐购买后自动绑定登录微信，无法转让、赠送、退款
          </div>
          <div class="mt-10 leading-20 text-14">
            5、如需生成较长视频，训练视频也需增加时长，保障动作多样性
          </div>
        </div>
      </div>
    </div>
    <!--  立即购买弹出框  -->
    <SubmitOrderPopup
      v-model:visible="submitOrderVisible"
      :order-details-params="adRechargeProdList[adRechargeProdNum]"
    />
  </div>
</template>
<script setup lang="ts">
import { ASSET_TYPE_MAP, IMG_CDN_39, VIDEO_CDN_39 } from "@/constants";
import {
  AdRechargeProdListInfoData,
  getAdRechargeProdList
} from "@/api/NoTrainVideoIntro";
import { onMounted, ref } from "vue";
import { payMoneySplit } from "../../utils";
defineOptions({
  name: "NoTrainVideoIntro"
});
// 提交订单弹窗
const submitOrderVisible = ref(false);
// 点击立即购买
const confirmBuy = () => {
  submitOrderVisible.value = true;
};
// 套餐ID
const adRechargeProdNum = ref<number>(0);
// 套餐列表
const adRechargeProdList = ref<AdRechargeProdListInfoData[]>([]);
// 套餐接口
const getAdRechargeProdListPort = async () => {
  adRechargeProdList.value = await getAdRechargeProdList();
};
// 初始化接口
onMounted(() => {
  getAdRechargeProdListPort();
});
</script>

<style scoped>
.page-wrapper {
  padding: 257px 15px 50px;
  min-height: 100%;
  background-position:
    top left,
    right 1295px,
    center bottom;
  background-size:
    100% 634px,
    100% 188px,
    100% 125px;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-color: #edebff;
}
.example-video-box,
.guide-video-box {
  height: 281px;
  border: 4px solid #ffffff;
}
.example-video-box .example-video,
.guide-video-box .guide-video {
  transform: scale(1.08);
}
.package-box {
  background-size:
    100% 100px,
    100% calc(100% - 100px);
  background-position:
    left top,
    left bottom;
  background-repeat: no-repeat, no-repeat;
}
</style>
